<template>
  <div class="cart">
    <van-swipe-cell
      v-for="item in cart"
      :key="item.id"
    >
      <van-card
        :num="item.amount"
        :price="item.price"
        desc="描述信息"
        :title="item.title"
        class="goods-card"
        :thumb="item.image"
      />
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import Vue from 'vue'
import { Card, SwipeCell, Button } from 'vant'

Vue.use(SwipeCell)
Vue.use(Card)
Vue.use(Button)

export default {
  name: 'Cart',
  computed: {
    cart () {
      return this.$store.state.cart
    }
  }
}
</script>

<style lang="scss" scoped>
  .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }
</style>
